<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        1 定位  position:relative / absolute / fixed / static

        固定定位  fixed
            脱离文档流的
            破坏元素原来的特征(块级元素不再继承宽度，行内元素可以支持宽高)
            永远参照于浏览器

        绝对定位  absolute
            脱离文档流的
            破坏元素原来的特征(块级元素不再继承宽度，行内元素可以支持宽高)
            需要给参照物  ---  必须是祖先元素  就近原则

        定位居中  
            left:50% ; top:50% ; transform:translate(-50% , -50%)      通用的方法
            left:0 ; right : 0 ; top : 0 ; bottom:0 ; margin:auto      子元素必须比父元素小才生效

            left/right/top/bottom   margin    百分比是相对于父元素而言的
            translate  百分比是相对于盒子自身而言的

        显隐效果
            display:none / block  没有动画效果的
            height:0;overflow:hidden;transition:.3s;    height:xxx    可以有动画效果的

            动画的方向   left 左边出      right 右边出     top 上边出     bottom 下边出
            
     -->
    
</body>
</html>